<template>
  <div class="instructionList">
    <div class="instructionList-title">功能指引</div>
    <div class="content-big">
      <div class="leftMenu">
        <div class="content-li">
          <div class="content-code" :class="active==index ?`active`:``"  v-for="(item,index) in contentList" @click="getFoor(index)">{{ item.title }}</div>
        </div>
      </div>
      <div class="right-content">
        <div class="guide-list" v-for="(item,index) in contentList" :key="index">
          <div class="guide-title">{{item.title}}</div>
          <div class="guide-content">
            <div class="guide-item" v-for="(sitem,sindex) in item.childList" :key="sindex">
              <img :src="sitem.icon"/>
              <div class="guide-info">
                <div class="title">{{ sitem.title }}</div>
                <div class="content">{{ sitem.content }}</div>
              </div>
              <div class="help">
                <div class="help-li" v-if="sitem.showVideo" @click="getVideo(sitem.videoUrl)">视频教程</div>
                <div class="help-li" v-if="sitem.isBook">操作手册</div>
              </div>

            </div>
          </div>

        </div>
      </div>
    </div>


  </div>

</template>
<script>
export default {
  name: "instructionList",
  data(){
    return{
      active:0,
      contentList:[
        {type:'jhy', title:'加好友',childList:[
            {
              key: 'zdjhy',
              title: '主动加好友',
              content: '导入手机号码自动逐个搜索添加好友',
              icon: require('@/assets/images/guide/g-12.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'jqhy',
              title: '加群好友',
              content: '导入手机号码自动逐个搜索添加好友',
              icon: require('@/assets/images/guide/g-13.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'zxlq',
              title: '在线聊天/客服分发',
              content: '聊天过程中可以添加群成员为好友',
              icon: require('@/assets/images/guide/g-2.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'mpjhy',
              title: '名片加好友',
              content: '指定个微分享名片自动发起好友申请',
              icon: require('@/assets/images/guide/g-14.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },

          ]},
        {type:'yqjq', title:'邀请入群',childList:[
            {
              key: 'yqjq-xkhyy',
              title: '新客户运营',
              content: '新客户添加成功后可自动邀请入群',
              icon: require('@/assets/images/guide/g-5.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'qhm',
              title: '群活码',
              content: '通过分享群活码 扫一扫邀请入群',
              icon: require('@/assets/images/guide/g-15.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'gjclq',
              title: '关键词拉群',
              content: '通过识别关键词自动发起邀请入群',
              icon: require('@/assets/images/guide/g-16.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'pllq',
              title: '批量拉群',
              content: '适用于将一批人依次拉进一个群',
              icon: require('@/assets/images/guide/g-17.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'plqyq',
              title: '批量群邀请',
              content: '适用于将一两个人依次拉进一批群',
              icon: require('@/assets/images/guide/g-18.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'yqjq-qzxlq',
              title: '在线聊天/客服分发',
              content: '适用于将一两个人依次拉进一批群',
              icon: require('@/assets/images/guide/g-2.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },

          ]},
        {type:'tcq', title:'踢出群',childList:[
            {
              key: 'zdtr',
              title: '自动踢人',
              content: '触发惩罚规则，自动踢出群',
              icon: require('@/assets/images/guide/g-6.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'hmd',
              title: '黑名单',
              content: '黑名单成员自动触发依次踢出所有群聊',
              icon: require('@/assets/images/guide/g-19.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'bmd',
              title: '白名单',
              content: '白名单成员可发起“踢@xx”口令进行踢人',
              icon: require('@/assets/images/guide/g-20.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'tcq-tzxlt',
              title: '在线聊天/客服分发',
              content: '聊天过程中支持直接踢人、加入黑名单等',
              icon: require('@/assets/images/guide/g-2.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },

          ]},
        {type:'zdfxx', title:'自动发消息',childList:[
            {
              key: 'zdfxx-xkhyy',
              title: '新客户运营',
              content: '新客户添加后自动发送欢迎语 可自动拉群',
              icon: require('@/assets/images/guide/g-5.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'rqhyy',
              title: '入群欢迎语',
              content: '客户进群后自动发送入群欢迎语',
              icon: require('@/assets/images/guide/g-10.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'znyd',
              title: '智能应答',
              content: '通过关键词等识别自动触发回复标准问题',
              icon: require('@/assets/images/guide/g-4.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'dqzf',
              title: '多群转发',
              content: '在主讲群里发送消息自动转发给其他群',
              icon: require('@/assets/images/guide/g-1.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'sop',
              title: 'SOP',
              content: '预设多天的话术, 按规则自动推送',
              icon: require('@/assets/images/guide/g-9.png'),
              showVideo:true,
              isBook: true
            },
            {
              key: 'gjqf',
              title: '高级群发',
              content: '批量发送消息，不限次数',
              icon: require('@/assets/images/guide/g-3.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'jsqf',
              title: '极速群发',
              content: '批量发送消息，速度更快，但次数受限',
              icon: require('@/assets/images/guide/g-7.png'),
              showVideo: false,
              isBook: true
            },

          ]},
        {type:'dbqbz', title:'打标签/备注',childList:[
            {
              key: 'dbqbz-xkhyy',
              title: '新客户运营',
              content: '触发默认方案自动打标签/备注',
              icon: require('@/assets/images/guide/g-5.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'dbqbz-zdjhy',
              title: '主动加好友',
              content: '根据手机号码自动打标签/备注',
              icon: require('@/assets/images/guide/g-12.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'khgl',
              title: '客户管理',
              content: '批量选择客户打标签',
              icon: require('@/assets/images/guide/g-21.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'znwj',
              title: '智能问卷',
              content: '根据问卷内容自动打标签',
              icon: require('@/assets/images/guide/g-22.png'),
              showVideo:false,
              videoUrl: '',
              isBook: true,
              bookUrl: '',
            },
            {
              key: 'gjcbq',
              title: '关键词标签',
              content: '识别关键词自动打标签',
              icon: require('@/assets/images/guide/g-23.png'),
              showVideo:false,
              isBook: true
            },

            {
              key: 'dbqbz-zxlt',
              title: '在线聊天/客服分发',
              content: '聊天过程中支持手动打标签',
              icon: require('@/assets/images/guide/g-2.png'),
              showVideo: false,
              isBook: true
            },

          ]},
        {type:'tshyd', title:'提升活跃度',childList:[
            {
              key: 'qjf',
              title: '群积分',
              content: '通过群行为获取积分，提高活跃度',
              icon: require('@/assets/images/guide/g-11.png'),
              showVideo: false,
              isBook: true
            },
          ]},
        {type:'qyfk', title:'企业风控',childList:[
            {
              key: 'mgcjk',
              title: '敏感词监控',
              content: '通过群行为获取积分，提高活跃度',
              icon: require('@/assets/images/guide/g-24.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'cshf',
              title: '超时回复',
              content: '超时未回复记录',
              icon: require('@/assets/images/guide/g-25.png'),
              showVideo: false,
              isBook: true
            },

          ]},
        {type:'hqz', title:'换群主',childList:[
            {
              key: 'hqz-khqgl',
              title: '客户群管理',
              content: '支持批量转移群主',
              icon: require('@/assets/images/guide/g-26.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'hqz-zxlt',
              title: '在线聊天/客服分发',
              content: '超时未回复记录',
              icon: require('@/assets/images/guide/g-2.png'),
              showVideo: false,
              isBook: true
            },

          ]},
        {type:'xgqm', title:'修改群名',childList:[
            {
              key: 'xgqm-kfqgl',
              title: '客户群管理',
              content: '支持批量转移群主',
              icon: require('@/assets/images/guide/g-26.png'),
              showVideo: false,
              isBook: true
            },
            {
              key: 'xgqm-zxlt',
              title: '在线聊天/客服分发',
              content: '聊天过程中单个修改群名称',
              icon: require('@/assets/images/guide/g-2.png'),
              showVideo: false,
              isBook: true
            },

          ]},
        {type:'xgqm', title:'通过入群',childList:[
            {
              key: 'jsqyq',
              title: '接受群邀请',
              content: '支持批量转移群主',
              icon: require('@/assets/images/guide/g-27.png'),
              showVideo: false,
              isBook: true
            },

          ]},
        {type:'xghy', title:'通过好友',childList:[
            {
              key: 'jsqyq',
              title: '接受新客户',
              content: '自动通过好友添加申请',
              icon: require('@/assets/images/guide/g-28.png'),
              showVideo: false,
              isBook: true
            },

          ]},
        {type:'xghy', title:'朋友圈',childList:[
            {
              key: 'jsqyq',
              title: '客服朋友圈',
              content: '一键批量发送朋友圈、评论、定时删除等',
              icon: require('@/assets/images/guide/g-1.png'),
              showVideo: true,
              isBook: true
            },

          ]},
      ],
      leftMenu:[],//左边导航菜单
    }
  },
  created() {

  },
  methods:{
    getFoor(index){
      this.active = index;
    let  offsetTop=  document.querySelectorAll('.guide-list')[index].offsetTop-80;
    console.log('offsetTop',offsetTop)
      document.querySelector('.right-content').scrollTo({
        top: offsetTop,
        behavior: 'smooth'
      });
    },
    getVideo(url) {
      this.showVideo = true;
    },
  },
}
</script>


<style scoped lang="scss">
.instructionList {
  height: 100%;
}
.content-li {
  margin-bottom: 20px;

  .content-title {
    font-size: 12px;
    color: rgba(0, 0, 0, .45);
    margin-bottom: 4px;
    font-weight: 400;
  }

  .content-code {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, .65);
    &.active {
      background-color: #ebf2ff;
      border-radius: 5px;
    }

  }
}
.guide-list {
  display: flex;
  flex-wrap: wrap;
  .guide-content {
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    width: 100%;
    padding: 8px 8px 0;
    display: flex;
    flex-wrap: wrap;
    margin-bottom:35px;
    .guide-item {
      list-style: none;
      width: 25%;
      display: flex;
      width: 300px;
      height: 70px;
      background-color: #fff;
      align-items: center;
      margin-right: 16px;
      margin-bottom: 8px;
      padding: 8px;
      border-radius: 6px;
      cursor: pointer;
      position: relative;

      &:hover {
        background-color: #fafafa;

        .help {
          display: flex;
        }
      }

      .guide-info {
        display: flex;
        flex-direction: column;

        .title {
          margin-bottom: 5px;
        }

        .content {
          font-size: 12px;
          color: rgba(0, 0, 0, .45);
        }
      }

      .help {
        position: absolute;
        right: 10px;
        top: 10px;
        display: none;
        color: #2d8cf0;

        .help-li {
          margin-right: 10px;
        }
      }
    }

    img {
      width: 48px;
      height: 48px;
      margin-right: 10px;
    }
  }

}
.instructionList-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  font-weight: bold;
}
.content-big {
  display: flex;
  height: calc(100% - 80px);
  margin: 16px;
  background: #fff;
  .leftMenu {
    width: 160px;
    padding: 16px;
    height: 100%;
    overflow: auto;
  }
  .right-content {
    flex: 1 0;
    height: 100%;
    overflow-y: auto;
    padding: 30px 24px;
    border-left: 1px solid #e9e9e9;

  }
  .guide-title {
    width: 100%;
    color: rgba(0, 0, 0, .85);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    position: relative;
    padding-left: 12px;
    display: block;
    &:after {
      position: absolute;
      left: 0;
      top: 3px;
      content: " ";
      width: 3px;
      height: 16px;
      background-color: #c2c7d4;
    }
  }
}
</style>
